<script lang="ts" setup>
import {inject, computed, ref, watch, onMounted} from 'vue'
import { Designer } from 'epic-designer'
import {getFormKpi} from "@/api/system/formconfig"
const designer = inject('designer') as Designer
const selectedNode = computed(() => {
  return designer.state.selectedNode
})

// 创建本地响应式变量
const kpiId = ref('')

// 监听 selectedNode 变化同步到本地变量
watch(
    () => selectedNode.value?.kpiId,
    (newVal) => {
      kpiId.value = newVal || ''
    },
    { immediate: true }
)

// 监听本地变量变化同步回 selectedNode
watch(kpiId, (newVal) => {
  if (selectedNode.value) {
    selectedNode.value.kpiId = newVal
  }
})
const selectOPtions = ref([])
onMounted(()=>{
  getFormKpi().then(response => {
    selectOPtions.value = response.data
  })

})
</script>

<template>
  <div class="px-4 py-2" >
  组件id: {{ selectedNode?.id }}
    {{ selectedNode?.kpiId }}
     <el-select
       clearable
       v-model="kpiId"
       :popper-append-to-body="false"
       popper-class="kpi-select-popper">
      <el-option label="请选择" value=""></el-option>
      <el-option v-for="item in selectOPtions" :label="item.NAME" :value="item.CODE"></el-option>
    </el-select>
  </div>
</template>
<style>
 .kpi-select-popper {
       position: absolute;
       z-index: 9999 !important;
     }
</style>
